import React, { useState } from 'react';
import { OrderedListOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { DatePicker } from 'antd';
import bodyParse from '@/utils/bodyParse';

const { RangePicker } = DatePicker,
  usestate = {
    RUNNING: '在用',
    STOP: '停用',
    SCRAP: '报废',
  },
  annualInspectionStatus = {
    1: '未年检',
    2: '已临期',
    3: '已超期',
  };
function DeviceUse() {
  let columnes = [
    {
      title: `电梯注册代码`,
      dataIndex: 'registryCode',
      key: 'registryCode',
      search: false,
    },
    {
      title: '电梯位置',
      dataIndex: 'equipmentUseAddress',
      key: 'equipmentUseAddress',
      search: false,
    },
    {
      title: '所属维保单位',
      dataIndex: 'maintenanceUnitName',
      key: 'maintenanceUnitName',
      search: false,
    },
    {
      title: '安全员',
      dataIndex: 'maintenanceChiefName',
      key: 'maintenanceChiefName',
      search: false,
      width: 100,
    },
    {
      title: '电梯使用状态',
      dataIndex: 'useState',
      key: 'useState',
      search: false,
      render: (_, row) => <span>{usestate[row.useState]}</span>,
      width: 180,
    },
    {
      title: '品牌',
      dataIndex: 'brand',
      key: 'brand',
      search: false,
      width: 88,
    },
    {
      title: '运行时间',
      dataIndex: 'startRunTime',
      key: 'startRunTime',
      search: false,
    },
    {
      title: '使用单位',
      dataIndex: 'useUnitName',
      key: 'useUnitName',
      search: false,
    },
    {
      title: '下次年检时间',
      dataIndex: 'nextAnnualInspectionTime',
      key: 'nextAnnualInspectionTime',
      search: false,
    },
    {
      title: '年检状态',
      dataIndex: 'annualInspectionStatus',
      key: 'annualInspectionStatus',
      search: false,
      width: 100,
      render: (_, row) => <span>{annualInspectionStatus[row.annualInspectionStatus]}</span>,
    },
  ];

  return (
    <div>
      <p
        className="title"
        style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', padding: 0 }}
      >
        <span>
          <OrderedListOutlined style={{ paddingRight: 6 }} />
          电梯列表
        </span>
      </p>

      <AutoTable
        path="/vehicle-api/lift"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columnes}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'data'}
      />
    </div>
  );
}

export default DeviceUse;
